<template>
  <el-container class="main">
    <el-aside :width="state.isCollapse? '56px':'200px'" class="main" style="background-color: #545c64">
      <el-menu :router="true"
               :default-active="activeRoute"
               :collapse="state.isCollapse"
               active-text-color="#ffd04b"
               background-color="#545c64"
               class="el-menu-vertical-demo"
               text-color="#fff">
                  <el-menu-item>
                    <span style="font-weight: bold;font-size: 13pt;">虚拟化资源管理系统</span>
                  </el-menu-item>
<!--        <h3 style="text-align: center;color:#FFFFFF;margin-bottom: 0;"><span v-if="!state.isCollapse">虚拟化资源管理系统</span></h3>-->
        <el-menu-item index="home" :route="{name:'home'}">
          <el-icon>
            <IconMenu/>
          </el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu :index="idx" v-for="(folder,idx) in info.userMenu">
          <template #title>
            <el-icon>
              <component :is="folder.icon"></component>
            </el-icon>
            <span>{{ folder.title }}</span>
          </template>
          <el-menu-item :route="{name:item.name}" :index="item.name" v-for="item in folder.children">
            {{ item.title }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>


    <el-container>
      <el-header height="48px" style="padding: 0;background-color: deepskyblue">
        <div class="pg-header">
          <div>
            <el-icon v-if="!state.isCollapse" color="#fff" size="25" @click="state.isCollapse=!state.isCollapse">
              <Fold/>
            </el-icon>
            <el-icon v-else color="#fff" size="25" @click="state.isCollapse=!state.isCollapse">
              <Expand/>
            </el-icon>
          </div>
          <div class="top-menu"><a @click="doLogout">{{ info.userName }}</a></div>
        </div>
      </el-header>
      <el-main class="body">
        <div class="body_content">
          <router-view/>
        </div>
      </el-main>
    </el-container>
  </el-container>

</template>

<script setup>
import {userInfoStore} from "@/stores/counter.js";
import {useRoute, useRouter} from "vue-router";
import {computed, reactive} from "vue";

import {Menu as IconMenu,} from '@element-plus/icons-vue'


const route = useRoute();
const activeRoute = computed(() => route.name);
const info = userInfoStore();
const router = useRouter();


const state = reactive({
  isCollapse: false,
});

function doLogout() {
  info.doLogout()
  router.push({name: 'login'})
}
</script>

<style>
body {
  margin: 0;
}

img {
  height: 100%;
}

.pg-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  height: 48px;
  padding: 0 20px 0 10px;
}

.pg-header .logo {
  line-height: 48px;
  height: 48px;
}

.pg-header .top-menu a {
  padding: 0 5px;
  text-decoration: none;
}

.main {
  display: flex;
  height: 100vh;
  margin-top: 0;
}

.body {
  background-color: #f5f5f5;
}

.el-menu {
  border-right: 0px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}


</style>